/*
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-03-23 15:01:22
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-03-23 15:17:40
 * @FilePath: \hongye_room\pages\home\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { FC, useState, useEffect, memo } from "react";
import { HomeSwipe, NavigationMenu, TopNavigation } from "@/components";
import { Card, Flex, Image } from "react-vant";
import { getGroups, getNews } from "@/api/homeModule";
import styles from "./index.module.scss";
import { Scroll } from "@/components/base";
// import Image from 'next/image'
// import Image from '../../components/Image/index'
// import ervice from '../../utils/request'
// import index from '../home/index.module.scss'
// navigator.geolocation.getCurrentPosition((options) => {
//   console.log(options)
// })

/**
 *
 * @name 获取顶部导航城市信息
 *查看百度地图的定位文档
 *通过IP定位获取到当前城市名称
 *调用我们服务器的接口，换取项目中的城市信息
 */
const HomePage: FC = () => {
  // 住房小组
  const [state, setstate] = useState([]);
  // 最新质询
  const [news, setnews] = useState([]);
  // 住房小组 拿到的数据
  useEffect(() => {
    (async () => {
      const { data } = await getGroups();
      try {
        if (data.status) {
          setstate((state) => [...(data.body as [])]);
        }
      } catch (error) {
        console.error(error);
      }
      // window.navigator.geolocation.getCurrentPosition((options) => {
      //   console.log(options)
      // })
    })();
    // 通过IP定位获取到当前城市名称
  }, []);
  // 最新质询 拿到的数据
  useEffect(() => {
    (async () => {
      const { data } = await getNews();

      try {
        if (data.status) {
          setnews((news) => [...(data.body as [])]);
        }
      } catch (error) {
        console.error(error);
      }
    })();
  }, []);
  // 住房小组
  const renderGroups = () => {
    return state.map((item: any) => (
      <Card round style={{ margin: "5px", width: "45%" }} key={item.id}>
        <Card.Body>
          <Flex className="group-item" justify="around" key={item.id}>
            <div className="desc">
              <p className="title">{item.title}</p>
              <span className="info">{item.desc}</span>
            </div>
            <Image
              src={`https://api-haoke-web.itheima.net${item.imgSrc}`}
              alt=""
              style={{ width: "55px" }}
            />
          </Flex>
        </Card.Body>
      </Card>
    ));
  };
  // 最新资讯
  const renderNews = () => {
    return news.map((item: any) => (
      <div className={styles.news_item} key={item.id}>
        <div className={styles.imgwrap}>
          <Image
            className={styles.img}
            src={`https://api-haoke-web.itheima.net${item.imgSrc}`}
            alt=""
          />
        </div>
        <Flex className={styles.content} direction="column" justify="between">
          <h3 className={styles.title}>{item.title}</h3>
          <Flex className={styles.info} justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ));
  };

  // console.log('初始化页面', ervice.defaults.baseURL)
  return (
    <div>
      <TopNavigation></TopNavigation>
      {/* 轮播图 */}
      <HomeSwipe></HomeSwipe>
      {/* 导航分类 */}
      <NavigationMenu></NavigationMenu>
      {/* 住房小组 */}
      <div>
        <div className={styles.group}>
          <h3>
            租房小组 <span>更多</span>
          </h3>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              flexWrap: "wrap",
            }}
          >
            {renderGroups()}
          </div>
        </div>
      </div>
      {/* 最新质询 */}

      <div className={styles.news}>
        <Scroll wrapHeight="300PX" prop={news}>
          <h3 className={styles.group_title}>最新资讯</h3>
          {renderNews()}
        </Scroll>
      </div>
    </div>
  );
};

export default HomePage;
